<template>
	<div id="root" :class="menuOpen ? 'menuOpen' : ''">
		<div class="console">
			<div class="logo-box">
				<img src="./assets/img/logo.png" class="logo">
			</div>
			<div class="console-title">大众点购管理控制台</div>
			<div class="user">欢迎您，{{account}}</div>
			<!-- <i class="ivu-icon ivu-icon-ios-arrow-down down" @mouseover="down"></i> -->
			<Menu mode="horizontal" :open-names="openName" theme="dark" :active-name="activeName" @on-select="select">
				<Submenu name="10">
					<MenuItem name="10-1">账户设置</MenuItem>
					<MenuItem name="10-2">退出控制台</MenuItem>
				</Submenu>
			</Menu>
		</div>
		<Menu class="menu-padding" theme="dark" :open-names="openName" :active-name="activeName" accordion ref="leftMenu"
		 @on-open-change="menuOpen = true" @on-select="select">
			<li class="ivu-menu-submenu bc" :class="menuOpen ? 'on' : ''" @click="menu">
				<div class="ivu-menu-submenu-title">
					<i class="ivu-icon ivu-icon-ios-arrow-forward back" :class="menuOpen ? 'on' : ''"></i>
				</div>
				<ul class="ivu-menu" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="hidden" style="overflow: hidden;"></ul>
			</li>

			<li class="ivu-menu-submenu" v-if="menuRole('0-1')">
				<div class="ivu-menu-submenu-title" @click="select('0-1')">
					<Icon type="md-home" /> 系统首页
				</div>
			</li>

			<Submenu name="1" v-if="menuRole('1-1') || menuRole('1-2')">
				<template slot="title">
					<Icon type="ios-people" /> 用户管理
				</template>
				<MenuItem name="1-1" v-if="menuRole('1-1')">用户列表</MenuItem>
                <!-- <MenuItem name="1-2" v-if="menuRole('1-2')">1.0用户列表</MenuItem> -->
                <MenuItem name="1-4" v-if="menuRole('1-4')">省代列表</MenuItem>
                <MenuItem name="1-5" v-if="menuRole('1-5')">市代列表</MenuItem>
                <MenuItem name="1-6" v-if="menuRole('1-6')">区代列表</MenuItem>
                <MenuItem name="1-3" v-if="menuRole('1-3')">合伙人列表</MenuItem>
                <MenuItem name="1-7" v-if="menuRole('1-7')">个人代理列表</MenuItem>
                <MenuItem name="1-8" v-if="menuRole('1-8')">推广员列表</MenuItem>
			</Submenu>

			<!-- <Submenu name="2" v-if="menuRole('2-1')">
				<template slot="title">
					<Icon type="md-expand" /> 服务管理
				</template>
				<MenuItem name="2-1">服务列表</MenuItem>
			</Submenu> -->

			<Submenu name="3" v-if="menuRole('3-1') || menuRole('3-2')">
				<template slot="title">
					<Icon type="ios-film" /> 视频管理
				</template>
				<!-- <MenuItem name="3-1" v-if="menuRole('3-1')">视频列表</MenuItem> -->
				<MenuItem name="3-2" v-if="menuRole('3-2')">视频审核</MenuItem>
			</Submenu>

            <Submenu name="9" v-if="menuRole('9-1')">
				<template slot="title">
					<Icon type="ios-paper-plane" /> 信息管理
				</template>
				<MenuItem name="9-1" v-if="menuRole('9-1')">信息审核</MenuItem>
				<!-- <MenuItem name="9-2">审核列表</MenuItem> -->
			</Submenu>

			<Submenu name="4" v-if="menuRole('4-1')">
				<template slot="title">
					<Icon type="md-list-box" /> 订单管理
				</template>
				<MenuItem name="4-1">订单列表</MenuItem>
			</Submenu>

			<Submenu name="5" v-if="menuRole('5-1')">
				<template slot="title">
					<Icon type="logo-yen" /> 财务管理
				</template>
				<MenuItem name="5-1" v-if="menuRole('5-1')">提现记录</MenuItem>
				<!-- <MenuItem name="5-2" v-if="menuRole('5-2')">提现审核</MenuItem> -->
				<!-- <MenuItem name="5-3" v-if="menuRole('5-2')">充值记录</MenuItem> -->
			</Submenu>

			 <Submenu name="6" v-if="menuRole('6-1')">
				 <template slot="title">
					<Icon type="md-star" /> 抵扣券管理
				</template>
				<MenuItem name="6-1" v-if="menuRole('6-1')">抵扣券设置记录</MenuItem>
			 </Submenu>

			<Submenu name="7" v-if="menuRole('7-3') || menuRole('7-4') || menuRole('7-5') || menuRole('7-7')">
				<template slot="title">
					<Icon type="md-construct" /> 系统管理
				</template>
				<!-- <MenuItem name="7-3" v-if="menuRole('7-3')">反馈管理</MenuItem> -->
				<MenuItem name="7-4" v-if="menuRole('7-4')">角色管理</MenuItem>
				<MenuItem name="7-5" v-if="menuRole('7-5')">添加成员</MenuItem>
				<!-- <MenuItem name="7-6" v-if="menuRole('7-6')">用户录入</MenuItem> -->
				<MenuItem name="7-7" v-if="menuRole('7-7')">权限管理</MenuItem>
			</Submenu>

			<Submenu name="8" v-if="menuRole('8-1') || menuRole('8-2') ||menuRole('8-3') || menuRole('8-4') || menuRole('8-5')">
				<template slot="title">
					<Icon type="md-cog" /> 系统设置
				</template>
				<!-- <MenuItem name="8-1" v-if="menuRole('8-1')">banner管理</MenuItem> -->
				<!-- <MenuItem name="8-2" v-if="menuRole('8-2')">安卓包版本管理</MenuItem> -->
				<!-- <MenuItem name="8-2">区域设置</MenuItem> -->
				<MenuItem name="8-3" v-if="menuRole('8-3')">平台设置</MenuItem>
                <!-- <MenuItem name="8-4" v-if="menuRole('8-4')">系统通知</MenuItem> -->
                <MenuItem name="8-5" v-if="menuRole('8-5')">公司简介管理</MenuItem>
			</Submenu>
		</Menu>
		<Loading v-show="isLoading" />
	</div>
</template>

<script>
	import store from "./store/SessionStorageStore";
	import Loading from "@/components/Loading";
	export default {
		data() {
			return {
                account: '',
                roles: '',
				menuOpen: false,
				openName: [],
				activeName: "",
				isDev: false,
				oldMenu: [],
                isLoading: false,
                openMenu: '',
			};
        },
		created() {
			this.isLogin(0);
		},
		mounted() {},
		components: {
			Loading
		},
		methods: {
			isLogin(index) {
				let _this = this;
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                STORAGE_KEY = 'Roles';
                let roles = store.fetch(STORAGE_KEY);
				if (userData === null && !_this.isDev) {
					window.location.href = "/login.html";
				} else {
                    if(!_this.isDev){
                        _this.account = userData.account;
                        _this.roles = roles;
                    }else {
                        _this.roles = '0-1,1-1,1-2,2-1,2-2,3-1,3-2,4-1,5-1,5-2,6-1,6-4,6-01,7-4,7-5,7-6,7-7,8-1,8-3,8-4';
                    }
                    window.$LoginTimeOut = function() {
                        if (window.LoginTimeOut) {
                            clearTimeout(window.LoginTimeOut);
                        }
                        window.LoginTimeOut = setTimeout(() => {
                            let STORAGE_KEY = "Login";
                            store.clear(STORAGE_KEY);
                            _this.$alert("登录已过期，请重新登录", "提示", {
                                confirmButtonText: "确定",
                                type: "warning",
                                callback: action => {
                                    _this.$store.state.isLogin = false;
                                    _this.$store.state.showLogin = true;
                                    clearTimeout(window.LoginTimeOut);
                                }
                            });
                        }, 1000 * 60 * 30 * 10000);
                    }
                    window.$LoginTimeOut();
                };
                if(index === 0) {
                    let rolesArr = _this.roles.split(',');
                    // _this.openMenu = rolesArr[0];
                    _this.select(rolesArr[0]);
                }
            },
            menuRole(name) {
                let re = new RegExp(name);
                return re.test(this.roles);
            },
			menu() {
				this.menuOpen = !this.menuOpen;
				if (!this.menuOpen) {
					function updateOpened() {}
					if (!this.menuOpen) {
						this.openName = [];
						this.$nextTick(function () {
							this.$refs.leftMenu.updateOpened();
						});
					}
				} else {
					this.openName = this.oldMenu;
					this.$nextTick(function () {
						this.$refs.leftMenu.updateOpened();
					});
				}
			},
			select(name) {
                this.isLogin(1);
                if(name == this.openMenu) {
                    return false;
                }else {
                    this.openMenu = name;
                }
                this.$store.state.isLoading = true;
                // console.log(name)
				if (name === "0" || name === '0-1') {
					this.$router.push({
						name: "Index"
					});
					this.openName = [];
					this.oldMenu = [];
					this.activeName = "0";
					this.$nextTick(function () {
						this.$refs.leftMenu.updateOpened();
						this.$refs.leftMenu.updateActiveName();
					});
					return false;
                };
				if (name === "1-1") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "UserList"
					});
					return false;
                }
                if (name === "1-2") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "OldUserList"
					});
					return false;
                }
                if (name === "1-3") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "PartnerList"
					});
					return false;
                }
                if (name === "1-4") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "ProvinceList"
					});
					return false;
                }
                if (name === "1-5") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "CityList"
					});
					return false;
                }
                if (name === "1-6") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "TownList"
					});
					return false;
                }
                if (name === "1-7") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "PersonalList"
					});
					return false;
				}
				if (name === "1-8") {
					this.oldMenu = ["1"];
					this.$router.push({
						name: "PromotersList"
					});
					return false;
				}
				if (name === "2-1") {
					this.oldMenu = ["2"];
					this.$router.push({
						name: "ServiceList"
					});
					return false;
				}
				if (name === "3-1") {
					this.oldMenu = ["3"];
					this.$router.push({
						name: "VideoList"
					});
					return false;
				}
				if (name === "3-2") {
					this.oldMenu = ["3"];
					this.$router.push({
						name: "VideoAudit"
					});
					return false;
				}
				if (name === "4-1") {
					this.oldMenu = ["4"];
					this.$router.push({
						name: "OrderList"
					});
					return false;
				}
				if (name === "5-1") {
					this.oldMenu = ["5"];
					this.$router.push({
						name: "Withdrawal"
					});
					return false;
				}
				if (name === "5-2") {
					this.oldMenu = ["5"];
					this.$router.push({
						name: "WithdrawalAudit"
					});
					return false;
				}
				if (name === "5-3") {
					this.oldMenu = ["5"];
					this.$router.push({
						name: "TopUp"
					});
					return false;
				}
				if (name === "6-1") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "VouchersList"
					});
					return false;
				}
				if (name === "6-2") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "PartnerEarnings"
					});
					return false;
				}
				if (name === "6-3") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "PartnerWithdrawal"
					});
					return false;
				}
				if (name === "6-4") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "Area"
					});
					return false;
				}
				if (name === "6-5") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "AreaEarnings"
					});
					return false;
				}
				if (name === "6-6") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "AreaWithdrawal"
					});
					return false;
				}
				if (name === "6-7") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "AreaInvite"
					});
					return false;
				}
				if (name === "6-8") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "National"
					});
					return false;
				}
				if (name === "6-9") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "NationalEarnings"
					});
					return false;
				}
				if (name === "6-10") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "NationalInvite"
					});
					return false;
				}
				if (name === "6-01") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "Personal"
					});
					return false;
				}
				if (name === "6-12") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "PersonalEarnings"
					});
					return false;
				}
				if (name === "6-13") {
					this.oldMenu = ["6"];
					this.$router.push({
						name: "PersonalInvite"
					});
					return false;
				}
				if (name === "7-1") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "Permissions"
					});
					return false;
				}
				if (name === "7-2") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "AreaAgentConfig"
					});
					return false;
				}
				if (name === "7-3") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "FeedBack"
					});
					return false;
				}
				if (name === "7-4") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "Role"
					});
					return false;
				}
				if (name === "7-5") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "AddUser"
					});
					return false;
				}
				if (name === "7-6") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "DataEntry"
					});
					return false;
				}
				if (name === "7-7") {
					this.oldMenu = ["7"];
					this.$router.push({
						name: "PermissionLsit"
					});
					return false;
				}
				if (name === "8-1") {
					this.oldMenu = ["8"];
					this.$router.push({
						name: "Banner"
					});
					return false;
				}
				// if (name === "8-2") {
				// 	this.oldMenu = ["8"];
				// 	this.$router.push({
				// 		name: "Apk"
				// 	});
				// 	return false;
				// }
				if (name === "8-3") {
					this.oldMenu = ["8"];
					this.$router.push({
						name: "Platform"
					});
					return false;
                }
                if (name === "8-4") {
					this.oldMenu = ["8"];
					this.$router.push({
						name: "Notice"
					});
					return false;
				}
				if (name === "8-5") {
					this.oldMenu = ["8"];
					this.$router.push({
						name: "CompanyProfile"
					});
					return false;
				}
				if (name === "9-1") {
					this.oldMenu = ["9"];
					this.$router.push({
						name: "ShareInfoList"
					});
					return false;
				}
				if (name === "10-1") {
					this.menuOpen = false;
					this.oldMenu = [];
					if (!this.menuOpen) {
						this.openName = [];
						this.activeName = "10-1";
						this.$nextTick(function () {
							this.$refs.leftMenu.updateOpened();
							this.$refs.leftMenu.updateActiveName();
						});
					}
					this.$router.push({
						name: "AccountConfig"
					});
				}
				if (name === "10-2") {
					let STORAGE_KEY = "Login";
                    store.clear(STORAGE_KEY);
                    this.$store.state.isLogin = false;
                    this.$store.state.showLogin = true;
                    this.$store.state.isLoading = false;
                    return false;
                }
			}
		}
	};
</script>

<style lang="less">
	@import "./assets/styles/reset.less";
	@import "./assets/styles/common.less";

	body {
		display: flex;
	}

	#root {
		background-color: #333;
		// padding-top: 60px;
		height: 100%;
		width: 48px;
		min-width: 48px;
		overflow-y: auto;
		overflow-x: hidden;
		transition: all 0.5s;

		.console {
			background-color: #333;
			width: 100%;
			height: 60px;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1001;
			display: flex;
			padding: 0 20px;

			.logo-box {
				width: 40px;
				height: 40px;
				margin-top: 10px;
				border-radius: 50%;
				overflow: hidden;

				.logo {
					width: 100%;
				}
			}

			.console-title {
				margin-left: 20px;
				color: #fff;
				height: 60px;
				line-height: 60px;
				font-size: 16px;
				flex: 1;
			}

			.user {
				height: 60px;
				line-height: 60px;
				font-size: 16px;
				color: #999;
				margin-left: 20px;
			}

			.down {
				height: 60px;
				line-height: 60px;
				font-size: 16px;
				color: #f2f2f2;
				margin-left: 10px;
			}

			.down:hover {
				cursor: pointer;
				color: dodgerblue;
			}
		}

		.ivu-menu-dark {
			background-color: #333;
		}

		.bc {
			background-color: #444;
			position: fixed;
			top: 60px;
			left: 0;
			z-index: 901;
			width: 48px;
			transition: all 0.5s;

			&.on {
				width: 240px;
			}
		}

		.back {
			transition: all 0.5s;
		}

		.back.on {
			margin-left: 170px;
			transform: rotate(180deg);
		}
	}

	#root .menu-padding {
		padding-top: 49px;
	}

	#root.menuOpen {
		width: 240px;
		min-width: 240px;
	}

	#app {
		flex: 1;
		// padding-top: 60px;
		height: 100%;
		overflow-x: hidden;
	}

	#root::-webkit-scrollbar {
		width: 0px;
		height: 0px;
	}
</style>
